'use client'
import Emberbox from '@/utils/mapbox/engine'
import React, { useEffect } from 'react'
import { useEmberboxStore } from '../../hooks/store'
import useInitLayerData from '../../hooks/LayerData/useInitLayerData'

const index = () => {
    const store: any = useEmberboxStore()
    useEffect(() => {
        const emberbox = new Emberbox('map',
            'pk.eyJ1IjoiZW1iZXJlZWVlIiwiYSI6ImNsbG9tZnhhdTBjOW0zZW9hNndjMDBheWQifQ.2tdcbznsaY7x4V0snpV9ZA',
            {
                center: [108.9519, 34.2647],
                zoom: 16
            }
        )

        store.setEmberbox(emberbox)

        setTimeout(() => {
            useInitLayerData(emberbox)
        }, 1000)
        return (() => {
            store.setEmberbox(null)
        })
    }, [])



    return (
        <>
            <div id='map' className='mapbox_container'></div>
        </>

    )
}

export default index